<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>calendar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> -->
    <!-- <script src="main.js"></script> -->
    <style>
        *{margin: 0px;padding: 0px}
        .calendar{width: 100%;height: 550px;margin: 0 auto}
        table{width: 100%;border-collapse: collapse;}
        table.bgtable thead tr th{height: 30px;}
        table.bgtable tbody tr td{height: 100px;box-sizing: border-box; border: 1px solid #ccc;text-align: right;vertical-align: top;}
        table.bgtable tbody tr td.gray{background: #eee}
        .tablebox2{position: absolute;top: 30px;width: 100%;height: 600px;border: 1px red solid;}
        .tablebox2 .row{height: 100px;}
        .tablebox2 .row .scheduletable{width: 100%;height: 70px;position: absolute;top: 30px;}
        .tablebox2 .row .scheduletable tr{height: 20px;width:100%}
        .tablebox2 .row .scheduletable tr td{width: 14.2857%;padding-left: 2px;box-sizing: border-box;}
        .tablebox2 .row .scheduletable tr .s{border-radius: 15px;font-size: 12px;height: 20px;line-height: 20px;padding-left: 10px;}
        .tablebox2 .row .scheduletable tr .s.life{background: palevioletred}
    </style>
</head>
<body>
    <div id="calendar" class="calendar">
        <div class="tablebox1">
            <table class="bgtable">
                <thead>
                    <tr>
                        <th v-for="(item,index) in daynamearr">{{ item}}</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr v-for="(week,index) in dayarr">
                        <td v-for="(day,index2) in week">{{day}}</td>
                    </tr> -->
                    <tr v-for="(week,index) in theweek()">
                        <td v-for="(item,index2) in week" v-bind:class="{'gray':item.premonth||item.nextmonth}">{{item.day}}</td>
                    </tr>
                </tbody>   
            </table>
        </div>
        <div class="tablebox2">
            <div class="row" v-for="(row,index1) in domdata">
                <table class="scheduletable">
                    <tr v-for="(line,index2) in row">
                        <td v-for="(td,index3) in line" v-bind:colspan="td.colspan">
                            <div v-if="td.title" v-bind:class ="['s',td.type]">{{td.title}}</div>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#calendar",
            data:{
                daynamearr:['周日','周一','周二','周三','周四','周五','周六'],
                //二维数组
                // dayarr:[
                //     [30,1,2,3,4,5,6],
                //     [7,8,9,10,11,12,13],
                //     [14,15,16,17,18,19,20]   
                // ],
                //一维数组
                // dayarr:[30,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,1,2,3]

                dayarr:[{"day":0}],
                year:2018,
                month:7,
                schedules:[
                    {'title':"开会"}
                ]
            },
            mounted:function(){
                var dayarr = [];
                //这个月的第一天是星期几,星期天-》0
                var themonthlstday = (new Date(this.year,this.month-1 ,1)).getDay();
                //本月有多少天 1 3 5 7 8 10 12-》31天，4 6 9 11 -》30天  2单独看闰年或者平年
                //这个月的第一天是下个月的第一天减1毫秒
                var y = this.month ==12 ? this.year+1 : this.year;//下一个月所在的年
                var m = this.month ==12 ? 1: this.month;//下一个月
                var themonthdaysamont = new Date(new Date(y,m,1)-1).getDate();
                //上一个月的最后一天
                var premonthlastdate = new Date (new Date(this.year,this.month-1,1)-1).getDate();
                var _y = this.month ==1 ? this.year-1 : this.year;//上一个月所在的年
                var _m = this.month ==1 ? 12: this.month-1;//上一个月
                //alert(premonthlastdate);
                //这个月的第一天是星期几，就要放入几个上个月的尾巴
                while(themonthlstday-- >0 ){
                    // dayarr.push(premonthlastdate--);
                    dayarr.unshift({"day" : premonthlastdate--,"year":_y,"month":_m,"premonth":true});
                }
                var count = 0
                while(themonthdaysamont-- >0){
                    dayarr.push({"day":++count,"year":this.year,"month":this.month});
                }
                //补足35项
                var count2 = 1
                if(dayarr.length < 35){
                    while(dayarr.length !=35){
                        dayarr.push({"day":count2++,"nextmonth":true,"year":y,"month":m});
                    }
                }else{
                    while(dayarr.length !=42){
                        dayarr.push({"day":count2++,"nextmonth":true,"year":y,"month":m});
                    }
                }
                // console.log(dayarr);
                this.dayarr = dayarr;
                //调用函数
                this.calcDomData(dayarr,this.schedules);

            },
            methods:{
                calcDomData(dayarr,schedules){
                    console.log(this.schedules);
                    //确认每个td是哪一天的
                    var domdata = this.dayarr.length==42?[
                        [[],[],[]],
                        [[],[],[]],
                        [[],[],[]],
                        [[],[],[]],
                        [[],[],[]],
                        [[],[],[]],

                    ]:[
                        [[],[],[]],
                        [[],[],[]],
                        [[],[],[]],
                        [[],[],[]],
                    ];

                    //往内部防止默认的td
                    domdata.forEach(function(row,index1){
                        row.forEach(function(line,index2){
                            for(var i=0;i<7;i++){
                                let theday = dayarr[index1 * 7 +i];
                                line.push({"year":theday.year,"month":theday.month,"day":theday.day})
                                console.log(theday);
                                // line.push({"year":});
                            }
                        })
                    });
                    console.log(domdata);

                    //加上数据,遍历schedules
                    schedules.forEach(function(schedules,index){
                        //拆分
                        var 
                    })

                },
                //将一维数组转换为二维数组
                theweek:function(){
                    var _arr = [];
                    for(var i=0;i<5;i++){
                        var _week = [];
                        for(var j=0;j<7;j++){
                            _week.push(this.dayarr[i*7+j]);
                        }
                        _arr.push(_week);
                    }
                    return _arr;
                }
            }
        })
    </script>
</body>
</html>